import type { DataTableColumn } from 'naive-ui'
import { NSelect , type SelectOption } from 'naive-ui'
import { usePhoneApi } from '@/api/PhoneApi.ts'
import type { Phone, PhonePageReq } from '@/type/PhoneType.ts'
import type { InternalRowData } from 'naive-ui/es/data-table/src/interface.js'
import  { DataTypeEnum } from '@/enum/FieldEnum.ts'
import { OperatingSystemEnum, OperatingSystemEnumLabel } from '@/enum/PhoneEnum.js'
import { ComponentEnum } from '@/enum/ComponentEnum.js'
import { useBrandApi } from '@/api/BrandApi.ts'
import type { Brand } from '@/type/BrandType.js'
import type { DefineComponent, PropType, ExtractPropTypes } from 'vue'
import  PhoneCategoryTreeSelector from '@/components/business/PhoneCategoryTreeSelector/index.tsx'
import { useCategoryApi } from '@/api/CategoryApi.ts'
import { BusinessEnum } from '@/enum/ApiEnum.js'
import { TableConfig } from '@/components/type/TableConfig'
import { PeaceColumn } from '@/components/type/PeaceColumn'
import PeaceRepeatRender from '@/components/type/PeaceRepeatRender'


const phoneApi = usePhoneApi()
const brandApi = useBrandApi()
const categoryApi = useCategoryApi()

const filterBrandComponent = defineComponent({
  props: {
    value: {
      type: [String, Number, Array] as PropType<string | number | (string | number)[] | undefined>,
      default: undefined
    },
    onChange: {
      type: Function as PropType<(value: any) => void>,
      default: undefined
    }
  },
  setup(props, { emit }) {
    const options = ref<SelectOption[]>([]);
    onMounted(async () => {
      try {
        const brands = await brandApi.allBrand();
        options.value = brands.map(brand => ({
          label: brand.name,
          value: brand.id
        }));
      } catch (error) {
        console.error('获取品牌数据失败:', error);
      }
    });
    return () => h(NSelect, {
      options: options.value,
      value: props.value,
      'onUpdate:value': (value) => emit('update:value', value),
      placeholder: '请选择品牌',
      style: {
        width: '200px',
      },
    });
  },
});


const columns:Array<PeaceColumn> = [
  {
    type: 'selection',
  },
  {
    title: '品牌',
    key: 'brand',
    componentEnum: ComponentEnum.SELECT,
    peaceFilterable: true,
    peaceRender: (item) => h(filterBrandComponent, {
      multiple: false,
      placeholder: '自定义占位符'
    }),
    saveConfig: {
      peaceEditable: true,
    },
    filterConfig:{
      autoExtend: true,
      peaceRender: (item) => h(filterBrandComponent, {
        multiple: false,
        placeholder: '自定义占位符'
      }),
    }
  },
  {
    title: '分类',
    key: 'categoryId',
    componentEnum: ComponentEnum.SELECT,
    peaceFilterable: true,
    peaceRender: (item) => h(PhoneCategoryTreeSelector, {
      multiple: false,
      placeholder: '自定义占位符'
    }),
    saveConfig: {
      peaceEditable: true,
    },
    filterConfig:{
      autoExtend: true,
      peaceRender: (item) => h(PhoneCategoryTreeSelector, {
        multiple: false,
        placeholder: '自定义占位符'
      }),
    }
  },
  {
    title: '分类2',
    key: 'categoryId2',
    peaceFilterable: true,
    componentEnum: ComponentEnum.CASCADER,
    optionConfig: {
      peaceApi: categoryApi.treeCategory,
      peaceApiParam: {id:"固定参数"},
      peaceValueField: "id",
      peaceLabelField: "name",
      peaceChildField: "child",
    },
  },
  {
    title: '型号',
    key: 'model',
    peaceFilterable: true,
    componentEnum: ComponentEnum.INPUT,
    saveConfig: {
      peaceEditable: true,
      required: false,
    }
  },
  {
    title: '价格',
    key: 'price',
    peaceFilterable: true,
    componentEnum: ComponentEnum.INPUT_NUMBER,
    saveConfig: {
      peaceEditable: true,
    },
    filterConfig:{
      autoExtend: true,
      repeatRender: {
        num: 2,
        format: PeaceRepeatRender.ARRAY
      },
    }
  },
  {
    title: '颜色',
    key: 'color',
    componentEnum: ComponentEnum.INPUT,
    saveConfig: {
      peaceEditable: true,
    }
  },
  {
    title: '存储',
    key: 'storage',
    peaceFilterable: true,
    componentEnum: ComponentEnum.INPUT_NUMBER,
    saveConfig: {
      peaceEditable: true,
    }
  },
  {
    title: '内存',
    key: 'ram',
    componentEnum: ComponentEnum.INPUT_NUMBER,
    peaceFilterable: true,
    saveConfig: {
      peaceEditable: true,
    }
  },
  {
    title: '屏幕尺寸',
    key: 'screenSize',
    componentEnum: ComponentEnum.INPUT_NUMBER,
    saveConfig: {
      peaceEditable: true,
    }
  },
  {
    title: '电池容量',
    key: 'batteryCapacity',
    componentEnum: ComponentEnum.INPUT_NUMBER,
    peaceFilterable: true,
    saveConfig: {
      peaceEditable: true,
    }
  },
  {
    title: '操作系统',
    key: 'operatingSystem',
    componentEnum: ComponentEnum.SELECT,
    peaceFilterable: true,
    optionConfig: {
      enum: OperatingSystemEnum,
      enumLabel: OperatingSystemEnumLabel,
    },
    saveConfig: {
      peaceEditable: true,
    }
  },
  {
    title: '发布日期',
    key: 'releaseDate',
    componentEnum: ComponentEnum.DATE,
    peaceFilterable: true,
    saveConfig: {
      peaceEditable: true,
    },
    filterConfig: {
      autoExtend: true,
      rangeConfig: {num:1},
    }
  },
  {
    title: '操作',
    key: 'tableRowAction',
    rowBtnList: [
      {name:"详情2",api:phoneApi.detailPhone,type:"primary",business:BusinessEnum.DETAIL},
      {name:"编辑",api:phoneApi.savePhone,type:"info",business:BusinessEnum.UPDATE},
      {name:"复制",api:phoneApi.savePhone,type:"info",business:BusinessEnum.ADD},
      {name:"删除",api:phoneApi.deletePhone,type:"error",business:BusinessEnum.DEL},
    ]
  },
]


export const PhoneTableConfig:TableConfig = {
  api:phoneApi.pagePhone,
  columns: columns,
  headerBtnList: [
    {name:"新增",api:phoneApi.savePhone,type:"primary",business:BusinessEnum.ADD},
    {name:"导入",api:phoneApi.importPhone,type:"primary",business:BusinessEnum.IMPORT,apiParams:'business=UI&storage=2025'},
    {name:"导出",api:phoneApi.exportPhone,type:"info",business:BusinessEnum.EXPORT},
    {name:"批量删除",api:phoneApi.batchDelPhone,type:"error",business:BusinessEnum.BATCH_DEL},
  ],
  saveDialogWidth: '60%',
  detailDialogWidth: '60%',
}
